<!DOCTYPE html>
<html lang="en" style="">
<head>
<!--shared:custom-meta-->
<base href="">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
let DEBUG = false
DEBUG = true /*debug*/
</script>
<style>
/*vfs[]:/css/highlight.css*/
/*vfs[]:/css/ui.css*/
/*file:custom.css */
</style>
<!--shared:custom-head-->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js"></script><!--safari-->
<script type="importmap">
{
    "imports": {
        "vue": "../js/vue.mjs",  
        "@servicestack/vue": "../js/servicestack-vue.mjs",
        "@servicestack/client": "../js/servicestack-client.mjs",
        "core": "../js/core.mjs",
        "app": "./lib/app.mjs",
        "dtos": "./lib/dtos.mjs"
    }
}
</script>
</head>
<body class="loading noauth">
<!--shared:custom-body-->

<div id="app"></div>

<template id="app-template">
<div>
    <div v-if="store.auth && store.isAdmin" class="">
        <sidebar v-if="showSidebar" @hide="showSidebar=false"></sidebar>
        <div class="md:pl-64 flex flex-col flex-1 overflow-auto h-screen">
            <div class="flex flex-1">
                <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white">
                    <button type="button" @click="showSidebar=true"
                            class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                        <span class="sr-only">Open sidebar</span>
                        <!---: Heroicon name: outline/menu -->
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
                <main class="flex-1 overflow-auto">
                    <div class="py-6">
                        <div class="mx-auto px-4 sm:px-6 md:px-8">
                            <h1 class="text-2xl font-semibold text-gray-900">{{store.link.label}}</h1>
                        </div>
                        <div class="mx-auto px-4 sm:px-6 md:px-8">
                            <div class="py-4">
                                <dashboard v-if="routes.admin === ''"></dashboard>
                                <validation v-else-if="routes.admin === 'validation'"></validation>
                                <users v-else-if="routes.admin === 'users'"></users>
                                <logging v-else-if="routes.admin === 'logging'"></logging>
                                <profiling v-else-if="routes.admin === 'profiling'"></profiling>
                                <redis v-else-if="routes.admin === 'redis'"></redis>
                                <database v-else-if="routes.admin === 'database'"></database>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <div v-else-if="store.auth && !store.isAdmin" class="w-full h-screen flex justify-center items-center">
        <div class="flex flex-col items-center">
            <alert><b>Admin</b> role required</alert>
            <div class="mt-4">
                <button type="button" @click="store.logout()"
                        class="flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Logout
                </button>
            </div>
        </div>
    </div>
    <sign-in v-else-if="server.plugins.auth" title="Sign in to your account" :provider="routes.provider" @login="store.login($event)"></sign-in>
</div>
</template>

<script>
function loadAuth(auth) {
    window.AUTH = !auth || auth.responseStatus ? null : auth
}
/*gateway:window.Server=MetadataApp({view:'locode',jsconfig:'eccn,inv:false'})?*/
</script>
<script src="../auth?callback=loadAuth&jsconfig=eccn"></script>

<script type="module">
import { useMetadata, useAuth } from "@servicestack/vue"
import { setFavIcon, setBodyClass } from "core"
import { humanify } from "@servicestack/client"

const { loadMetadata } = useMetadata()
const { signIn, toAuth } = useAuth()

globalThis.AUTH = toAuth(globalThis.AUTH)
loadMetadata()
signIn(globalThis.AUTH)
setBodyClass({ auth:globalThis.AUTH })

document.title = globalThis.Server.app.serviceName
setFavIcon(globalThis.Server.ui.brandIcon, globalThis.Server.app.baseUrl + '/metadata/svg/servicestack.datauri')
</script>

<script>
/*files:js/*.js */
</script>
<!--components:Brand,CopyIcon-->
<!--module:components/*.mjs-->
<!--file:custom.html-->

<script type="module">
import { ref, computed, nextTick, inject, onMounted } from "vue"
import { $1, $$ } from "@servicestack/client"
import { app } from "app"

const App = {
    template: $1('#app-template'),
    setup(props) {
        const store = inject('store')
        const routes = inject('routes')
        const server = inject('server')
        
        const showSidebar = ref(true)

        let sub = null
        let lastOp = null
        
        onMounted(() => {
            sub = app.events.subscribe('route:nav', args => {
                // need to refresh to update when navigating to the same op/page 
                if (args.op && args.op === lastOp) {
                    // console.log('route:nav', JSON.stringify(args))
                }
                lastOp = args.op
            })
        })
        
        return { store, routes, server, showSidebar }
    }
}

app.build(App).mount('#app')
app.start()
</script>
<script>
/*vfs[]:/js/highlight.js*/
</script>
<script>
/*file:custom.js */
</script>

<!--shared:custom-end-->
</body>
</html>
